<template>
    <el-dialog 
        :title="$t('setting.messageChannel.rechargeRecord')" 
        :visible.sync="dialogVisible" 
        width="800px"
        @open="search">

        <div class="time-search">
            <span>{{$t('setting.messageChannel.byTimeQuery')}}</span>
            <el-date-picker
                v-model="datePicker"
                style="width: 100%;"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="-"
                :start-placeholder="$t('common.base.startDate')"
                :end-placeholder="$t('common.base.endDate')"
                :clearable="false"
                @change="dateChange"
                :default-time="['00:00:00', '23:59:59']"
                value-format="timestamp"
                :picker-options="pickerOptions">
            </el-date-picker>
        </div>

         <el-table
            :data="tableData"
            stripe
            border
            :highlight-current-row="false"
            height="300"
            class="product-template-table email-table"
            v-loading="loading"
        >
            <el-table-column
                prop="createTime"
                :label="$t('order.detailV2.orderTime')"
                width="180">
                <template slot-scope="scope">
                    {{ formatTime(scope.row.createTime) }}
                </template>
            </el-table-column>

            <el-table-column
                prop="packContent"
                :label="$t('setting.messageChannel.packageContent')"
                width="180"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="paymentAmount"
                :label="$t('setting.messageChannel.payAmount')"
                width="120">
            </el-table-column>
            <el-table-column
                prop="specValue"
                :label="$t('setting.messageChannel.increaseMinutes')"
                width="150">
            </el-table-column>
            <el-table-column
                prop="paidTime"
                :label="$t('order.detailV2.paymentTime')"
                width="180">
                <template slot-scope="scope">
                    {{ formatTime(scope.row.paidTime) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="payStatus"
                :label="$t('order.detailV2.orderStatus')">
                <template slot-scope="{row}">
                    <span 
                        :class="row.payStatus === 'wait' ? 'link' : ''" 
                        @click="payHandle(row.orderId)"
                    > 
                        {{formatStatus(row.payStatus)}}
                    </span>
                </template>
            </el-table-column>
        </el-table>

        <!-- start 表格底部 -->
        <div class="table-footer">
            <div class="list-info">
                <i18n path="common.base.table.totalCount">
                    <span place="count" class="level-padding">{{ total || 0 }}</span>
                </i18n>
            </div>
            <el-pagination
            class="product-template-table-pagination"
            background
            @current-change="jump"
            @size-change="handleSizeChange"
            :page-sizes="defaultTableData.defaultPageSizes"
            :page-size="searchModel.pageSize"
            :current-page="searchModel.pageNum"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            ></el-pagination>
        </div>
        <!-- end 表格底部 -->

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('common.base.cancel')}}</el-button>
        </div>

    </el-dialog>
</template>

<script>
/* mixin */
import timeSearchMixin from '@src/mixins/timeSearchMixin/index.js'
import { formatDate } from 'pub-bbx-utils';
import platform from '@src/platform'
import qs from 'qs'
import * as PayApi from '@src/api/PayApi';
import { t } from '@src/locales'
import {payHandle} from '@src/util/recharge'
import { defaultTableData } from '@src/util/table'
export default {
    mixins: [timeSearchMixin],

    data(){
        return {
            defaultTableData,
            tableData:[],
            searchModel: {
                pageSize: 10,
                pageNum: 1,
            },
            total:0,
            loading:false,
          payHandle
        }
    },

    props:{
        value:{
            type:Boolean,
            required:true
        },
        
        // 商品码
        commodityCode:{
            type:String,
            required:true
        },
    },

    computed:{
        dialogVisible:{
            get(){
                return this.value;
            },

            set(val){
                this.$emit('input', val)
            }
        },
    },

    methods:{
        formatTime(val) {
            if (!val) return '';
            return formatDate(val, 'YYYY-MM-DD HH:mm:ss');
        },

        formatStatus(status) {
            if (!status) return '';
            let res;
            switch (status) {
                case 'wait':
                    res = t('bill.list.tradeResultMap[0]'); break;
                case 'succ':
                    res = t('bill.list.tradeResultMap[1]'); break;
                case 'fail':
                    res = t('bill.list.tradeResultMap[2]'); break;
                case 'free':
                    res = t('setting.messageChannel.freeOfPayment'); break;
                default:break;
            } 
            return res; 
        },

        dateChange(event) {
            let data = event?.length === 2 ? event : []
            this.datePicker = data;
            this.searchModel.pageNum = 1;
            this.search();
        },

        buildParams() {
            let params = { 
                ...this.searchModel,
                commodityCode: this.commodityCode
            };
            const [ start, end ] = this.datePicker || []

            params.createTimeStart = start;
            params.createTimeEnd = end;
            return params;
        },

        // 搜索
        async search() {
            
            const params = this.buildParams();
            try {
                this.loading = true
                const { status, message, data } = await PayApi.queryPageInfo(params);
                this.loading = false
                if(status !== 0) return;
                const { list = [], total } = data || {}
                this.tableData = list || []
                this.total = total || 0
            }catch(error){
                this.loading = false
            }
        },

        // 页码数切换
        handleSizeChange(pageSize) {
            this.searchModel.pageSize = pageSize;
            this.searchModel.pageNum = 1;
            this.search();
        },

        // 跳转
        jump(pageNum) {
            this.searchModel.pageNum = pageNum;
            this.search();
        },
    }
}
</script>

<style lang="scss" scoped>
.product-template-list-content .email-table {
  padding: 0;
}
.error-text {
  color: #e51c23;
}
.success-text {
  color: #0db3a6;
}
.loading-text {
  color: #259b24;
}
.view-detail{
  color: $color-primary;
}
.mail-receiver {
  display: flex;
  i {
    color: #faae14;
    margin-left: 4px;
    margin-right: 2px;
  }
}
.link {
  color: $color-primary;
  cursor: pointer;
}
.time-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom:16px;
  .el-date-editor {
    width: 240px!important;
    margin-left: 12px;
  }
}
</style>